<script setup lang="ts">
import { ref, computed } from 'vue'
/*
  计算属性:
  1) 使用场景: 当一个属性的结果需要运算得来, 可以把这个属性定义成计算属性
  2) 计算属性依赖的数据发生变化, 计算属性会重新计算
  好处:
  计算属性有缓存(只需要计算一次), 但是如果用函数则没有缓存
*/

const list = ref([
  { id: 1, name: '篮球', num: 1 },
  { id: 2, name: '玩具', num: 2 },
  { id: 3, name: '铅笔', num: 5 },
])

// 礼物总数
const total = computed(() => {
  console.log('我被执行了')
  return list.value.reduce((sum, item) => sum + item.num, 0)
})

// const getTotal = () => {
//   console.log('我被执行了-函数')
//   return list.value.reduce((sum, item) => sum + item.num, 0)
// }

</script>


<template>
  <div id="app">
    <h3>小黑的礼物清单</h3>
    <p>礼物总数：{{ total }} 个</p>
    <p>礼物总数：{{ total }} 个</p>
    <p>礼物总数：{{ total }} 个</p>
    <p>礼物总数：{{ total }} 个</p>
    <p>礼物总数：{{ total }} 个</p>
    <p>礼物总数：{{ total }} 个</p>
    <p>礼物总数：{{ total }} 个</p>
    <p>礼物总数：{{ total }} 个</p>
    <p>礼物总数：{{ total }} 个</p>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ total }} 个</p>
  </div>
</template>

<style>
table {
  border: 1px solid #000;
  text-align: center;
  width: 240px;
}

th,
td {
  border: 1px solid #000;
}

h3 {
  position: relative;
}
</style>
